<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <button>1</button>
    <button>2</button>
    <button>3</button>

    <script>

        // 

        // for (var i = 0; i < 10; i++) {
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }


        // {
        //     var i = 0;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }


        // {
        //     var i = 1;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }


        // {
        //     var i = 2;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }





        // for (let i = 0; i < 10; i++) {
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }



        // {
        //     let i = 0;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }


        // {
        //     let i = 1;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }


        // {
        //     let i = 2;
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // }




        // const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        // arr.forEach(function (item, i) {
        //     setTimeout(function () {
        //         console.log(i);
        //     })
        // })



        //     (function (item, i) {
        //         // console.log(i);
        //         setTimeout(function () {
        //             console.log(i);
        //         })
        //     })(0, 0)

        //     (function (item, i) {
        //         console.log(i);
        //     })(1, 1)

        //     (function (item, i) {
        //         console.log(i);
        //     })(2, 2)


        const oBtns = document.querySelectorAll('button');
        for (let i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = function () {
                console.log(i);
            }
        }


    </script>

</body>

</html>